import React, { useState, useDeferredValue,memo } from 'react'

const MemoList = React.memo(List)

function Test() {
    const [inputValue, setInputValue] = useState('')

    const deferredValue = useDeferredValue(inputValue)

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        console.log('handleChange')
        setInputValue(e.target.value)
    }

    console.log('inputValue:', inputValue)
    console.log('deferredValue:', deferredValue)

    return (
        <div>
            <input
                type="text"
                value={inputValue}
                onChange={handleChange}
                placeholder="Search..."
            />
            <MemoList inputValue={deferredValue} />
        </div>
    )
}

export default Test


// 定义一个列表组件List
function List(props = { inputValue: '' }) {
    const { inputValue } = props

    console.log('List render: ', inputValue)

    let k = 0
    for (let i = 0; i <= 300000000; i += 1) {
        k = i
    }

    return (
        <ul>
            <li>Cycle Times {k}Text: {inputValue}</li>
            <li>Cycle Times {k}Text: {inputValue}</li>
            <li>Cycle Times {k}Text: {inputValue}</li>
            <li>Cycle Times {k}Text: {inputValue}</li>
            <li>Cycle Times {k}Text: {inputValue}</li>
        </ul>
    )
}

